import React, {useRef} from 'react';
import {ModalForm} from "@ant-design/pro-form";
import {ProFormDateTimePicker, ProFormInstance, ProFormMoney, ProFormText} from "@ant-design/pro-form";
import dayjs from "dayjs";
import {OweLogItem} from "@/pages/OweLogs/data";

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<OweLogItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  modalVisible: boolean;
  values: Partial<OweLogItem>;
};

const PaybackForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  return (
    <ModalForm
      title={`还钱给 ${props.values.toWho}`}
      visible={props.modalVisible}
      width={400}
      formRef={formRef}
      // Drawer抽屉需要关联上层UpdateForm的点击管理函数
      onFinish={props.onSubmit}
      modalProps={{
        destroyOnClose: true,
        // 抽屉层关闭函数， 需要关联上层的onCancel函数
        onCancel: function (){
          props.onCancel()
        },
      }}
    >
      <ProFormText
        name={"oweId"}
        initialValue={props.values?.id}
        hidden={true}
      />
      <ProFormMoney
        name={"money"}
        label={"还多少"}
        placeholder={"0.00"}
        rules={[{required:true, message:'金额必填！'}]}
      />
      <ProFormDateTimePicker
        name={"time"}
        label={"时间"}
        initialValue={`${dayjs(new Date()).utc().format()}`}
        fieldProps={{
          style: {"width": "100%"},
          onChange : (value: any) => {
            formRef.current?.setFieldsValue({
              time: dayjs(value).utc().format()
            })
          }
        }}
      />
      <ProFormText
        label={"备注"}
        name={"remark"}
      />
    </ModalForm>
  );
};

export default PaybackForm;
